//下发检查通知单
import React, { useState } from 'react'
import '../../../../css/oper_inspertion/tablejian.less'
import { addResult } from '../../../../../../api/csy/api'
import { message, Button, Upload } from 'antd';

import { UploadOutlined } from '@ant-design/icons';
import type { UploadProps } from 'antd';






const Secode: React.FC = () => {
    const [bian, setBian] = useState("");
    const [name, setName] = useState("");
    const [content, setContent] = useState("");
    const [timer, setTimer] = useState("");
    const [rusult, setRusult] = useState('')

    const handleBianChange = (e: React.ChangeEvent<HTMLInputElement>) => setBian(e.target.value);
    const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => setName(e.target.value);
    const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
        setContent(e.target.value);
    };
    const handleTimerChange = (e: React.ChangeEvent<HTMLInputElement>) => setTimer(e.target.value);

    const props: UploadProps = {
        name: 'file',
        action: 'http://localhost:3000/csy/upload',
        headers: {
            Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
        },
        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                console.log(info.file.response.data)

                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };


    const dian = () => {
        addResult({ bian, name, content, timer, rusult }).then((res) => {
            if (res.data.code == 200) {
                message.success('添加成功');
            } else {
                message.error('添加失败');
            }
        })
    }
    return (
        <div className='secode'>
            <div className='secode-content'>
                <div className='secode-title'>
                    <span className='secode-title-span'>文件编号</span>
                    <div className='secode-title-input'>
                        <input
                            className='secode-title-input'
                            value={bian}
                            onChange={handleBianChange}
                            type="text"
                        />
                    </div>
                </div>
                <div className='secode-title'>
                    <span className='secode-title-span'>报告名称</span>
                    <div className='secode-title-input'>
                        <input
                            className='secode-title-input'
                            value={name}
                            onChange={handleNameChange}
                            type="text"
                        />
                    </div>
                </div>
                <div className='secode-title'>
                    <span className='secode-title-span'>报告内容</span>
                    <div className='secode-title-input'>
                        <textarea
                            className='secode-title-input'
                            value={content}
                            onChange={handleContentChange}
                            cols={30}
                            rows={5}
                        ></textarea>
                    </div>
                </div>
                <div className='secode-title'>
                    <span className='secode-title-span'>报告附件</span>
                    <div className='secode-title-input'>
                        <Upload {...props}>
                            <Button icon={<UploadOutlined />}>添加附件</Button>
                        </Upload>
                    </div>
                </div>

            </div>



            <div style={{ marginTop: 10 }}>
                <span style={{ marginLeft: 10, fontSize: 14, }}>签发单位:齐溪水库灌区管理中心</span>
                <div style={{ marginLeft: 10, marginTop: 10 }}>
                    <span>时间:</span>
                    <input
                        style={{ marginLeft: 10, width: 200 }}
                        value={timer}
                        onChange={handleTimerChange}
                        type="datetime-local"
                    />
                </div>
                <div>
                    <span style={{ marginLeft: 10, fontSize: 14, }}>检查结论:</span>

                    <input
                        style={{ marginLeft: 10, width: 200 }}
                        value={rusult}
                        onChange={(e) => setRusult(e.target.value)}
                        type="text"
                    />

                </div>
                <button className='secode-btn' onClick={dian}>提交</button>
            </div>
        </div>
    )
}

export default Secode
